<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">

</head>
<body>
    <div>
        <button type="button" id="addRole" class="layui-btn layui-btn-normal">新增</button>
    </div>
    <div>
        <table id="demo" lay-filter="test"></table>
    </div>
</body>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/lay/modules/jquery.js}"></script>

</html>
<script  th:inline="none">
    layui.use(['table','jquery','tree'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        var tree = layui.tree;

        //第一个实例
        function loadtable(){

            table.render({
                elem: '#demo'
                , url: '/getRoleList' //数据接口
                , page: true //开启分页
                ,request: {
                    pageName: 'current' //页码的参数名称，默认：page
                    ,limitName: 'size' //每页数据量的参数名，默认：limit
                }
                , cols: [[ //表头
                    {type: 'numbers', title: '序号', width: 80, fixed: 'left'}
                    , {field: 'name', title: '角色名'}
                    , {field: 'describes', title: '描述'}
                    , {field: 'id',title: '操作', width: 240, templet: function (d) {
                            return `
                        <button lay-name="user" type="button" id="permission" lay-msg="${d.id}" class="layui-btn layui-btn-normal layui-btn-xs">权限</button>
                        <button lay-name="user" type="button" id="edit" class="layui-btn layui-btn-xs" lay-msg="${d.id}">编辑</button>
                        <button lay-name="deleteUser" type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-msg="${d.id}">删除</button>
                        `
                        }
                    }
                ]]
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": '数据获取失败', //解析提示文本
                        "count": res.data.records.length, //解析数据长度
                        "data": res.data.records //解析数据列表
                    };
                }
            });
        }
        loadtable()

        // 点击添加按钮
        $("#addRole").click(function () {
            var index = layer.open({
                type: 2,
                content: '/popupPage/role/add/0',
                btn: ['添加','取消'],
                area: ['700px', '500px'],
                yes: function (index, layero) {
                    // 发送异步请求添加角色
                    var body = layer.getChildFrame('body', index);
                    //console.log(body) //得到iframe页的body内容
                    let roleData = $(body).children("#addRole").serialize();
                    $.post("/addRole",roleData,function (data) {
                        if(data.code==200){
                            layer.msg(data.message, {icon: 1,time:1000});
                            loadtable()
                        }else {
                            layer.msg(data.message, {icon: 2,time:1000});
                        }
                        layer.close(index);
                    })
                },
                btn2: function (index, layero) {

                }
            })
        })

        $(document).on('click', 'button[lay-name="user"]', function () {
            let attr = $(this).attr("id");
            let id = $(this).attr("lay-msg");
            layer.open({
                type: 2,
                title: '权限',
                area: ['700px', '500px'],
                content: ['/toLayer/role/' + $(this).attr("id") + '/' + id, 'no'],
                btn: ['提交','取消'],
                yes: function (index, layero) {
                    // 修改
                    var body = layer.getChildFrame('body', index);
                    if(attr=='edit'){
                        //按钮【按钮一】的回调
                        let serialize = $(body).children("#editRole").serialize()+"&id="+id;
                        // 发送请求修改角色
                        $.ajax({
                            type: 'delete',
                            url: '/updateRoleById',
                            data: serialize,//'ids='+arr+'&_method=delete',
                            success: function(data){
                                if(data.code==200){
                                    layer.msg(data.message, {icon: 1,time:1000});
                                    loadtable()
                                }else {
                                    layer.msg(data.message, {icon: 2,time:1000});
                                }
                                layer.close(index);
                            },
                            error: function(data){
                                layer.msg(data.message, {icon: 2,time:1000});
                            }
                        });
                    }else {
                        //getData
                        $(body).children("#getData").click();
                        //alert($(body).children("#getData").val());addRolePermission
                        var ids = $(body).children("#getData").val();
                        console.log(ids)
                        $.ajax({
                            type: 'post',
                            url: '/addRolePermission',
                            data: {rid:id,pids:ids},//'ids='+arr+'&_method=delete',
                            success: function(data){
                                if(data.code==200){
                                    layer.msg(data.message, {icon: 1,time:1000});
                                    loadtable()
                                }else {
                                    layer.msg(data.message, {icon: 2,time:1000});
                                }
                                layer.close(index);
                            },
                            error: function(data){
                                layer.msg(data.message, {icon: 2,time:1000});
                            }
                        });
                    }

                },
                btn2:function (index, layero) {

                }
            });
        });
        $(document).on('click', 'button[lay-name="deleteUser"]', function () {
            let id = $(this).attr("lay-msg");
            layer.open({
                content: '是否确定删除'
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                    $.ajax({
                        type: 'delete',
                        url: '/deleteRoleById',
                        data: {id:id},//'ids='+arr+'&_method=delete',
                        success: function(data){
                            if(data.code==200){
                                layer.msg(data.message, {icon: 1,time:1000});
                                loadtable()
                            }else {
                                layer.msg(data.message, {icon: 2,time:1000});
                            }
                        },
                        error: function(data){
                            layer.msg(data.message, {icon: 2,time:1000});
                        }
                    });
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        });
    });

</script>
